<template>
  <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
           :collapse="isCollapse" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
    <div class="title">
      <h3 style="color: #fff" v-show="!isCollapse">通用后端管理系统</h3>
      <h3 style="color: #fff" v-show="isCollapse">后台</h3>
    </div>

    <!--  :index——绑定其地址，v-for——循环遍历没有子菜单的数据，遍历一个铺垫上一个导航栏菜单，:key——获取值  -->
    <el-menu-item :index="item.label" v-for="item in noChildren" :key="item.path" @click="clickMenu(item)">
      <!--   手动拼接绑定每次遍历的图标   -->
      <i :class="'el-icon-' + item.icon "></i>
      <!--   获取每次遍历的名字label   -->
      <span slot="title">{{ item.label }}</span>
    </el-menu-item>
    <!--  外层遍历有Children属性的data  -->
    <el-submenu :index="item.label" v-for="item in hasChildren" :key="item.path" @click="clickMenu(item)">
      <template slot="title">
        <!--   手动拼接绑定每次遍历的图标   -->
        <i :class="'el-icon-' + item.icon "></i>
        <!--   获取每次遍历的名字label   -->
        <span slot="title">{{ item.label }}</span>
      </template>
      <el-menu-item-group>
        <!--    内层遍历children属性    -->
        <el-menu-item :index="subItem.label" v-for="(subItem,subIndex) in item.children" :key="subItem.path" @click="clickMenu(subItem)">
            <!--   手动拼接绑定每次遍历的图标   -->
            <i :class="'el-icon-' + subItem.icon "></i>
            <!--   获取每次遍历的名字label   -->
            <span slot="title">{{ subItem.label }}</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>

  </el-menu>
</template>


<script>
export default {
  name: "CommonAside",
  data() {
    return {
/*      isCollapse: false,*/   //改成通过计算属性来写
      menu: [
        {
          path: "/",
          name: "Home",
          label: "首页",
          icon: "s-home",
          url: "home/Home",
        },
        {
          path: "/mall",
          name: "Mall",
          label: "商品管理",
          icon: "video-play",
          url: "MallManage/MallManage",
        },
        {
          path: "/user",
          name: "User",
          label: "用户管理",
          icon: "user",
          url: "UserManage/UserManage",
        },
        {
          label: "其他",
          icon: "location",
          children: [{
            path: "/page1",
            name: "page1",
            label: "页面1",
            icon: "setting",
            url: "Other/PageOne",
          },
            {
              path: "/page2",
              name: "page2",
              label: "页面2",
              icon: "setting",
              url: "Other/PageTwo",
            }
          ]
        }
      ]
    };
  },

  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    clickMenu(item){
      //编程式请求，无需写路由配置
      this.$router.push({name:item.name})
      this.$store.commit("selectMenu",item)
    }
  },
  //计算属性，适用于遍历数据；相当于methods，比methods好
  computed: {
    noChildren() {
      return this.menu.filter((item) => !item.children);
    },
    hasChildren() {
      return this.menu.filter((item) => item.children);
    },
    isCollapse(){
      return this.$store.state.table.isCollapse;  //引入状态集中isCollapse的值
    }

  }
}
</script>


<style scoped lang="scss">
  .el-menu{
    width: 60px;
    min-height: 100%;
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 200px;
      min-height: 100%;
  }

  .title{
    text-align:center;
    line-height: 60px;
  }

  h3{
    font-size: 20px;
    height: 56px;
  }

</style>

